<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <div class="img_outer">
      <van-image width="100%" height="200" :src="card_image" />
    </div>
    <van-cell title="赠送优惠卡" size="large" />
    <van-form @submit="onSubmit" v-if="gift_image == null">
      <van-field
        v-model="form.card_name"
        name="name"
        label="名称"
        placeholder="优惠卡名称"
        readonly
      />
      <van-field v-model="form.amount" name="amount" label="面值" readonly>
        <template #button>
          <van-button size="small">元</van-button>
        </template>
      </van-field>
      <van-field name="count" label="赠送数量">
        <template #input>
          <van-stepper
            :min="0"
            :default-value="0"
            v-model="form.count"
            integer
          />
        </template>
        <template #button>
          <van-button size="small">张</van-button>
        </template>
      </van-field>
      <van-cell title="赠送金额" :value="total_money + ' 元'">
        <template>
          <van-tag type="primary">{{ total_money }} 元</van-tag>
        </template>
      </van-cell>

      <div style="margin: 32px">
        <van-button round block type="info" native-type="submit"
          >创建赠送二维码</van-button
        >
      </div>
    </van-form>
    <div class="img_outer" v-if="gift_image">
      <van-image width="200" height="200" :src="gift_image">
        <template v-slot:loading>
          <van-icon name="qr-invalid" size="5rem" />
        </template>
      </van-image>
    </div>
    <div style="margin: 32px 64px" v-if="gift_image">
        <van-button round block type="info" @click="gift_image=null"
          >取消</van-button
        >
    </div>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import NavBar from "@/components/NavBar";
import { getWxRetailerCardById } from "@/api/card";
import { show_qrcode } from "@/api/wechat";
export default {
  name: "GiftCard",
  components: {
    NavBar,
  },
  computed: {
    total_money() {
      return this.form.amount * this.form.count;
    },
  },
  data() {
    return {
      title: this.$route.meta.title,
      card_image: null,
      gift_image: null,
      form: {
        r_card: null,
        retailer: null,
        card_name: null,
        amount: null,
        openid: null,
        count: 0,
      },
    };
  },

  props: ["retailer_id", "card_id"],

  mounted() {
    this.getRetailerCard();
  },

  methods: {
    getRetailerCard() {
      getWxRetailerCardById(this.card_id)
        .then((res) => {
          console.log(res.data);
          this.form.r_card = res.data.id;
          this.form.retailer = res.data.retailer;
          this.form.card_name = res.data.card_name;
          this.form.amount = res.data.amount;

          this.card_image = res.data.card_image;
        })
        .catch((error) => {
          this.$toast("失败:" + error);
        });
    },
    onSubmit(values) {
      console.log(values);
      // this.addCard();
      this.$dialog
        .confirm({
          title: "赠送确认",
          message: `赠卡数量: ${values["count"]} 张<br>总金额为: ${this.total_money} 元`,
        })
        .then(() => {
          this.getQrCode(this.form);
        })
        .catch(() => {});
    },

    getQrCode(values) {
      const pid = localStorage.getItem("openid");
      const base64_pid = Base64.encode(pid);
      const url = `http://${window.location.host}/#/retailer/${values["retailer"]}/${values["r_card"]}/gift?count=${values["count"]}&pid=${base64_pid}`;
      const params = {
        url: url,
      };
      show_qrcode(params)
        .then((res) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.gift_image = data;
        });
    },
  },
};
</script>

<style scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.van-tag {
  line-height: 24px;
}
</style>